<template>
  <div>
    <!-- 修改训练次数 -->
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="姓名">
        <el-alert :closable="false">
          {{ addForm.customerName }}
        </el-alert>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-alert :closable="false">
          {{ addForm.customerTel }}
        </el-alert>
      </el-form-item>
      <el-form-item label="训练次数" prop="trainCount">
        <el-input-number
          v-model="addForm.trainCount"
          placeholder="请输入训练次数"
          class="w-full"
          :min="0"
          :precision="0"
        />
      </el-form-item>
    </el-form>

    <div class="fixed bottom-2 right-2">
      <el-button>取消</el-button>
      <el-button type="primary" @click="handleSubmit">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { handleApiResponse } from "@/utils/request.js";
import { UpdateCustomerTrainCount } from "../../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  addForm.value = props.detailForm;
});

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {},
  },
});

const addFormRef = ref(null);
const addForm = ref({});

const loading = ref(false);
const handleSubmit = () => {
  addFormRef.value.validate(async (valid) => {
    if (!valid) return;

    loading.value = true;
    handleApiResponse(() =>
      UpdateCustomerTrainCount({
        customerId: addForm.value.id,
        trainCount: addForm.value.trainCount,
      })
    ).then((res) => {
      if (res.code == 0) {
        ElMessage.success("修改成功");
        handleCancel(1);
      }
      loading.value = false;
    });
  });
};

const handleCancel = (val = 0) => {
  emit("handleBack", val);
};

const rules = ref({
  trainCount: [{ required: true, message: "请输入训练次数" }],
});
</script>

<style scoped lang="scss">
</style>